<template>
  <div class="">
    child
    <p>{{ name }} 吃 {{ foods }}</p>
  </div>
  <button @click="sendValue">传值给父组件</button>
</template>

<script setup>
import {} from 'vue'
// 如果需要再script中使用，需要接收一下，传递过来的数据是响应式数据
const props = defineProps({
  name: {
    type: String, // Vue中字符串类型是大写
    required: true
  },
  foods: {
    type: Array
  }
})

// console.log('---props---', props)

// 调用defineEmits，得到的也是一个函数啦，defineEmits它的参数是数组，因为他可以定义多个自定义事件
const emit = defineEmits(['pay'])

const sendValue = () => {
  // vue2 this.$emit('pay',50)

  // vue3 通过触发emit函数
  emit('pay', 50)
}
</script>

<style scoped></style>
